import util from 'service/util'
import Vue from 'vue'

var ifIos = util.platform().iPhone || util.platform().iPad
var betterInput = {
    inputElem: null
}

Vue.directive('betterInput', {
    inserted(el, binding) {
        if (ifIos) {
            // 如果是 iPhone 或者 iPad，则不需要此优化
            return
        }
        // 0 不移动
        // 1 上移
        if (binding.value == 0 && !ifIos) {
            el.addEventListener('focus', function () {
                betterInput.inputElem = null
            })
        } else if (binding.value == 1) {
            el.addEventListener('focus', function () {
                betterInput.inputElem = el
            })
        }
    }
})

var styleText = `
  .page{
    height:${window.innerHeight}px;
    bottom:auto;
    transition:all 0.2s;
  }
`

var nod = document.createElement('style')
// ie 下
if (nod.styleSheet) {
    nod.styleSheet.cssText = styleText
} else {
    // 或者写成 nod.appendChild(document.createTextNode(str))
    nod.innerHTML = styleText
}
document.getElementsByTagName('head')[0].appendChild(nod)

window.addEventListener('resize', function () {
    // 根据inputElem判断是否需要上滑
    if (betterInput.inputElem == null) {
        return
    }
    /**
     * 1.页面高度与当前屏幕高度差，若小于页面高度30%，视为页面高度发生变化
     * 2.大于30%，视为键盘弹出或者隐藏导致的变化
     */
    var page = document.querySelector('.page')
    var pageHeight = page.clientHeight
    var winHeight = window.innerHeight
    var disHeight = pageHeight - winHeight

    // 根据window.innerHeight来进行判断
    if (disHeight / pageHeight > 0.3) {
        // 视为键盘导致的变化
        var top = util.getTopDistance(betterInput.inputElem)
        var scale = top / pageHeight
        page.style.top = -Math.sqrt(64 * scale * 800) + 'px'
    } else {
        // 视为页面变化
        page.style.height = winHeight + 'px'
        page.style.top = '0px'
    }
})

export default betterInput